import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Redirect } from 'react-router-dom';

import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import PasswordBox from 'react-uwp/PasswordBox';
import TextBox from 'react-uwp/TextBox';
import Image from 'react-uwp/Image';
// import Tabs, { Tab } from 'react-uwp/Tabs';
import { Tabs, Alert } from 'antd';

import CheckBox from 'react-uwp/CheckBox';

import ThirdLogin from '../components/auth/ThirdLogin';
import { signInWithCb } from '../store/fakeAuth';
import { showErrmsg, login } from '../store/user';
import { baseInput } from '../utils/commonStyle';
import { PSDLOGIN, CODELOGIN } from '../utils/constant';
import SendCode from '../components/common/SendCode';

const TabPane = Tabs.TabPane;
const propTypes = {
  signInWithCb: PropTypes.func.isRequired,
  history: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  logged: PropTypes.bool.isRequired
};
export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      psdphone: '',
      password: '',
      codephone: '',
      phoneDisable: false,
      code: '',
      type: PSDLOGIN
    };
  }
  componentDidMount() {
    this.closeErrMsg();
  }
  accountLogin() {
    return (
      <div className="dfc w100">
        <TextBox
          style={{ ...baseInput, margin: '0.96rem 0' }}
          placeholder="请输入手机号"
          onChangeValue={value => {
            this.closeErrMsg();
            this.setState({ psdphone: value });
          }}
        />
        <PasswordBox
          style={baseInput}
          passwordBoxHeight={45}
          onChangeValue={value => {
            this.closeErrMsg();
            this.setState({ password: value });
          }}
          placeholder="8~20位密码"
        />
      </div>
    );
  }
  closeErrMsg() {
    const { errMsg, showErrmsg } = this.props;
    if (errMsg) {
      showErrmsg('');
    }
  }
  disablePhone = state => {
    this.setState({
      phoneDisable: state
    });
  };
  cellLogin() {
    const { codephone, phoneDisable } = this.state;
    return (
      <div className="dfc w100">
        <TextBox
          style={{ ...baseInput, margin: '0.96rem 0' }}
          placeholder="请输入手机号"
          onChangeValue={value => {
            this.closeErrMsg();
            this.setState({ codephone: value });
          }}
          disabled={phoneDisable}
        />
        <div className="dfr w100" style={{ alignItems: 'stretch' }}>
          <div className="dfr fx1" style={{ marginRight: '0.4rem' }}>
            <TextBox
              style={{ ...baseInput, margin: '0' }}
              placeholder="请输入验证码"
              onChangeValue={value => {
                this.closeErrMsg();
                this.setState({ code: value });
              }}
            />
          </div>
          <SendCode
            phone={codephone}
            disablePhone={this.disablePhone}
            api="/loginVaild"
          />
        </div>
      </div>
    );
  }

  tabChange(key) {
    this.setState({
      type: key
    });
  }
  submit() {
    const { psdphone, codephone, type, code, password } = this.state;
    const { showErrmsg, login } = this.props;
    let phone = type == PSDLOGIN ? psdphone : codephone;
    if (!phone) {
      showErrmsg('手机号不能为空');
      return;
    }
    if (!phone.match('^[1][34578][0-9]{9}$')) {
      showErrmsg('手机号码格式不正确');
      return;
    }
    if (type == PSDLOGIN && !password) {
      showErrmsg('密码不能为空');
      return;
    }
    if (type == CODELOGIN && !code) {
      showErrmsg('验证码不能为空');
      return;
    }
    const res = login({
      phone,
      password,
      code
    });
    //路由跳转操作
  }
  toRegister() {
    this.closeErrMsg();
    this.props.history.replace('/auth/register');
  }
  render() {
    const { errMsg, showErrmsg, logged, location } = this.props;
    const { from, params } = location.state || { from: { pathname: '/' } };
    return logged ? (
      <Redirect to={from} /> //怎么回传参数
    ) : (
      <div
        className="authWrap"
        style={{ width: '20rem', padding: '0 1.76rem' }}
      >
        <div className="logo">
          <Image
            src={require('../assets/img/common/logo.png')}
            className="imgCover"
            onClick={() => this.props.history.replace('')}
          />
        </div>
        <div className="authForm">
          <Alert
            message={errMsg}
            type="error"
            showIcon
            style={{ width: '100%', display: errMsg ? 'block' : 'none' }}
          />
          <Tabs onChange={key => this.tabChange(key)} style={{ width: '100%' }}>
            <TabPane tab="密码登录" key={PSDLOGIN} style={{ width: '100%' }}>
              {this.accountLogin()}
            </TabPane>

            <TabPane tab="短信登录" key={CODELOGIN} style={{ width: '100%' }}>
              {this.cellLogin()}
            </TabPane>
          </Tabs>
          <div style={{ width: '100%', marginTop: '0.96rem' }}>
            <CheckBox defaultChecked={false} label="记住我" size={14} />
          </div>
          <button
            className="btn"
            style={{ margin: '0.96rem 0' }}
            type="sbumit"
            onClick={() => this.submit()}
          >
            登录
          </button>
          <p className="fnormal">
            登录即代表同意51瞧瞧商城
            <Link to="" target="_blank">
              《用户协议》
            </Link>
          </p>
          <div className="dfrcb fx1 w100">
            <Link to="" className="fnormal">
              忘记密码
            </Link>
            <a className="aNormal" onClick={() => this.toRegister()}>
              免费注册
            </a>
          </div>
        </div>
        <div style={{ width: '100%', marginTop: '1.2rem' }}>
          <ThirdLogin />
        </div>
      </div>
    );
  }
}

Login.propTypes = propTypes;
const mapStateToProps = state => ({
  logged: state.user.logged,
  errMsg: state.user.errMsg
});

const mapDispatchToProps = {
  showErrmsg,
  signInWithCb,
  login
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login);
